<template>
	<view class="read-history">
		<view class="read-item" v-for="(i,ind) in booklist" :key="ind">
			<view class="book-img">
				<image :src="i.book_img" mode=""></image>
			</view>
			<view class="book-content">
				<view class="book-title">
					{{i.book_title}}
				</view>
				<view class="book-summary">
					{{i.book_summary}}
				</view>
				<view class="book-select">
					<span @click="switchDetail(i.book_id,i.book_title)">去阅读</span><span @click="delRead(i.book_id,i.user_id)">删除记录</span>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				booklist:[]
			}
		},
		onShow() {
			let key=uni.getStorageSync("key")
			uniCloud.callFunction({
				name:"where_record",
				data:{
					user_id:key
				},
				success:res=>{
					this.booklist=res.result.data.reverse()
					console.log(res.result.data.reverse());
				}
			})
		},
		methods: {
			switchDetail(bookid,booktitle){
				uni.navigateTo({
					url: `../detail/detail?id=${bookid}&title=${booktitle}`
				})
			},
			delRead(book_id,user_id){
				uni.showModal({
					mask:true,
					title:'删除当前记录',
					content: '确定删除？',
					cancelText: "取消", 
					confirmText: "确认",
					success: (res) => {
					if(res.confirm) {
					console.log('确定') 
					console.log(book_id,user_id);
					uniCloud.callFunction({
						name:"del_readhistory",
						data:{
							book_id,user_id
						},
						success:res=>{
							uniCloud.callFunction({
								name:"where_record",
								data:{
									user_id
								},
								success:res=>{
									this.booklist=res.result.data.reverse()
									// console.log(res.result.data.reverse());
								}
							})
						}
					})
					} else {
					console.log('取消') 
					}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.read-history{
	box-sizing: border-box;
	padding:20rpx;
	.read-item{
		// margin-top: 25rpx;
		margin-bottom: 30rpx;
		display: flex;
		.book-img{
			width: 180rpx;
			height: 240rpx;
			image{
				border-radius: 8rpx;
				width: 100%;
				height: 100%;
			}
		}
		.book-content{
			box-sizing: border-box;
			padding-left:20rpx ;
			padding-right: 40rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.book-title{
				font-size: 30rpx;
				font-weight: bold;
			}
			.book-summary{
				height: 76rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
			}
		}
		.book-select{
			// width: 160rpx;
			display: flex;
			justify-content: end;
			span{
				padding: 6rpx 10rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				font-size: 26rpx;
				color: white;
				background-color: #ffa275;
				margin: 0 10rpx;
			}
		}
	}
}
</style>
